<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <%@include file="/static/assets/widget/header.jsp"%>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .input-group{
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
            width: 100%;
            text-align: left;
        }
        .intputText{
            height: 35px!important;
            border: 1px solid #ccc!important;
        }
        .fromdiv{
            display:inline;
            margin-left: 2rem;
        }
        .querydiv{
            padding-right: 30px;
            float: right;
        }
        .btn{
            height: 40px!important;
            line-height: 0px!important;
            margin-right: 15px !important;
        }
        .operatingdiv{
            float: left;
            margin-top: 50px;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div>
        <div class="input-group">
            <form id="searchForm" class="form-inline definewidth m20">
                <div class="fromdiv">
                    <label>搜索关键字: </label>
                    <div class="fromdiv">
                        <input type="text" class="intputText" name="keyword" id="keyword" placeholder="请输入搜索关键字">
                    </div>
                </div>

                <div class="fromdiv">
                    <label>品牌: </label>
                    <div class="fromdiv">
                        <input type="text" class="intputText" name="brandName" id="brandName" placeholder="请输入品牌">
                    </div>
                </div>

                <div class="fromdiv">
                    <label>价格筛选: </label>
                    <div class="fromdiv">
                        <input type="text" class="intputText" name="minPrice" id="minPrice" placeholder="请输入最低价格">
                        -
                        <input type="text" class="intputText" name="maxPrice" id="maxPrice" placeholder="请输入最高价格">
                    </div>
                </div>
            </form>
            <div>
                <div class="querydiv">
                    <button type="button" id="searchBtn" class="btn btn-primary">查询</button>
                    <%--<button type="button" class="btn btn-primary">重置</button>--%>
                </div>
                <div class="operatingdiv">
                    <button type="button" class="btn" id="batchPushPro">批量推送</button>
                    <%--<button type="button" class="btn">test</button>--%>
                </div>
            </div>
        </div>
        <div>
            <table id="taskList_table" class="table table-bordered table-hover definewidth">
            </table>
        </div>
    </div>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <%--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">--%>
                        <%--&times;--%>
                    <%--</button>--%>
                    <h4 class="modal-title" id="myModalLabel">
                        推送提示
                    </h4>
                </div>
                <div class="modal-body">
                    确认推送当前商品吗?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消
                    </button>
                    <button type="button" class="btn btn-primary" id="pushConfirm">
                        确认推送
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</body>
<script>
    var columns;
    $(function () {
        columns = [{
            field: 'id',
            title: '选择',
            align: 'center',
            formatter: function (value, row, index) {
                return '<input type="checkbox" name="ckeckId" value="' + value + '"/>';
            }
        }, {
            field: 'name',
            title: '商品名字',
            align: 'center'
        }, {
            field: 'image',
            title: '商品图片',
            align: 'center',
            formatter: function (value, row, index) {
                return '<a target="view_window" href="'+value+'" >查看</a>';
            }
        }, {
            field: 'brandName',
            title: '品牌',
            align: 'center'
        }, {
            field: 'originPrice',
            title: '商品原价',
            align: 'center',
            formatter: function (value, row, index) {
                return (value/100) + " 元";
            }
        }, {
            field: 'price',
            title: '商品价格',
            align: 'center',
            formatter: function (value, row, index) {
                return (value/100) + " 元";
            }
        }, {
            field: 'priceOrigin',
            title: '价差',
            align: 'center',
            formatter: function (value, row, index) {
                var oriPrice = (row.originPrice - row.price)/100;
                return oriPrice+" 元";
            }
        }, {
            field: 'stockQuantity',
            title: '库存数量',
            align: 'center'
        },{
            field: 'id',
            title: '操作',
            align: 'center',
            formatter: function (value, row, index) {
                return '<a href="javascript:;" onclick="pushPro('+value+')">推送</a>';
            }
        }];
    });
    var searchData = {};
    $("#searchBtn").click(function () {
        var keyword = $("#keyword").val();
        if (keyword == ""){
            alert("请输入搜索关键字")
            return;
        }
        searchData = form2js('searchForm', '.', true);
        console.log(searchData);
        initTable();
    });

    var a = {key:"ceshi0"};
    a = JSON.stringify(a);
    var b = JSON.parse(a);
    console.log(b);

    function initTable() {
        // queryParams.pageIndex = 1;
        // queryParams.pageSize = 10;
        // let data = JSON.stringify(queryParams);
        // var seachParam = {"data":data};
        $('#taskList_table').bootstrapTable('destroy').bootstrapTable({
            method : 'post',    // 向服务器请求方式
            contentType : "application/json",  // 如果是post必须定义
            url : "<%=basePath%>"+"zflProduct/queryProductList",   // 请求url
            cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            striped : true, // 隔行变色
            dataType : "json",  // 数据类型
            pagination : true,  // 是否启用分页
            showPaginationSwitch : false, // 是否显示 数据条数选择框
            pageSize : 10, // 每页的记录行数（*）
            pageNumber : 1,     // table初始化时显示的页数
           // pageList: [10,30,50], //可供选择的每页的行数（*）
            search : false, // 不显示 搜索框
            sidePagination : 'server', // 服务端分页
            classes : 'table table-bordered', // Class样式
//      showRefresh : true, // 显示刷新按钮
            silent : true, // 必须设置刷新事件
            toolbar : '#toolbar',       // 工具栏ID
            toolbarAlign : 'left',     // 工具栏对齐方式
            queryParams : selectParams,  // 请求参数，这个关系到后续用到的异步刷新
            columns : columns,
            formatLoadingMessage: function () {
                return "请稍等，正在加载中...";
            },formatNoMatches: function () {  //没有匹配的结果
                return '无符合条件的记录';
            },formatShowingRows: function (pageFrom, pageTo, totalRows) {
                $('#totalRows').html(totalRows);
                return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
            },
            formatRecordsPerPage: function (pageNumber) {
                return '每页显示 ' + pageNumber + ' 条记录';
            }
        });
    }

    function selectParams(params){
        searchData.pageSize = params.limit; //每一页的数据行数，默认是上面设置的10(pageSize)
        searchData.pageIndex = params.offset/params.limit+1;//当前页面,默认是上面设置的1(pageNumber)
        return {
            "data":JSON.stringify(searchData)
        }
    }

    var proId = 0;
    //推送商品
    function pushPro(id) {
        proId = id;
        $("#myModal").modal("show");
    }

    var ids = [];
    //确认推送
    $("#pushConfirm").click(function () {
        ids.push(proId);
        _function.zflPushPro({"ids":ids.join(",")},data=>{
            $("#myModal").modal("hide");
            alert("推送成功");
        })
        ids = [];
    })

    //批量推送
    $("#batchPushPro").click(function () {
        var _ids = $("[name='ckeckId']");
        $.each(_ids,function () {
           var val = this.attr("value");
           ids.push(val);
        })
        _function.zflPushPro({"ids":ids.join(",")},data=>{
            $("#myModal").modal("hide");
            alert("推送成功");
        })
        ids = [];
    })
</script>
</html>
